﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>爬虫</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="static/layui-v2.5.4/layui/css/layui.css" media="all">
	<script src="static/layui-v2.5.4/layui/layui.js" charset="utf-8"></script>
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>
<script src="static/layui-v2.5.4/layui.js"></script>
<style>
	body {
		font-family: "Lato", sans-serif;
	}

	.sidenav {
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #111;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
	}

	.sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		display: block;
		transition: 0.3s;
	}

	.sidenav a:hover,
	.offcanvas a:focus {
		color: #f1f1f1;
	}

	.sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}

	@media screen and (max-height: 450px) {
		.sidenav {
			padding-top: 15px;
		}

		.sidenav a {
			font-size: 18px;
		}
	}

	#checkbox1 {
		height: 20px;
		width: 20px;
	}

	#div_wait {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 99;
		/* transform: translate(-50%, -50%); */
		display: none;
	}
</style>
<script>
	function openNav() {//打开侧边栏函数
		document.getElementById("mySidenav").style.width = "250px";
	}

	function closeNav() {//关闭侧边栏函数
		document.getElementById("mySidenav").style.width = "0";
	}
	layui.use('laydate', function () {
		var laydate = layui.laydate;

		//执行一个laydate实例
		laydate.render({
			elem: '#test1' //指定元素
		});
	});

	// 检查数据是否合法
	function checkOK() {
		var flag = true;
		// 检查数字输入框中的是否是数字
		var num = document.getElementById("num_input").value;
		var reg = /^[1-9]\d*$|^0$/; // 判断正整数的正则式
		if (!reg.test(num) || num <= 0 || num > 9999) {
			alert("请您输入一个正整数（1~9999）……");
			flag = false;
		}
		if (flag) {
			// 检查是否选中了数据源
			var hasCheck = false;
			var ds_boxes = document.getElementsByName("datasource");
			for (var i = 0; i < ds_boxes.length; i++)
				if (ds_boxes[i].checked) {
					hasCheck = true;
					break;
				}
			// 如果没有选择数据源
			if (!hasCheck) {
				alert("请至少选择1个数据源！");
				flag = false;
			}
		}
		return flag;
	}


	// 执行爬虫
	function doCrawler() {
		// 先对用户的输入&选择做出判断，检查其是否合法
		if (checkOK()) {

			// 从下拉框中获取当前的搜索关键字的值
			var keyword = document.getElementById("keyword").value;
			// 获取当前数据源复选框
			var ds_boxes = document.getElementsByName("datasource");
			// 判断数据源是否使用
			var ds_baidu = false;
			var ds_sougou = false;
			var ds_360 = false;
			if (ds_boxes[0].checked)
				ds_baidu = true;
			if (ds_boxes[1].checked)
				ds_sougou = true;
			if (ds_boxes[2].checked)
				ds_360 = true;
			// 获取图片的下载数量
			var num = document.getElementById("num_input").value;
			var show = document.getElementById("div_wait");
			alert('开始执行爬虫！');
			$.ajax({
				type: "POST",
				url: "/crawler.do",
				data: {
					'keyword': keyword,
					'baidu': ds_baidu,
					'sougou': ds_sougou,
					'360': ds_360,
					'num': num
				},
				beforeSend: function () {
					show.style.display = "block";
				},
				success: function (res) {
					show.style.display = "none";
					alert("爬取图片成功！");
				},
				error: function (res) {
					alert(res);
				}
			})
		}
	}
	// 直接重置所有的参数
	function doReset() {
		// 获取当前数据源复选框
		var ds_boxes = document.getElementsByName("datasource");
		// 将它们全部取消选中
		for (var i = 0; i < ds_boxes.length; i++)
			ds_boxes[i].checked = false;
		// 获取数量的输入框
		var num_input = document.getElementById("num_input");
		num_input.value = '';
	}

</script>

<body style="background-image: url(static/common/image/bg2.jpg);background-size: 100%">
	<!--导航栏-->
	<nav class="navbar navbar-expand-sm  navbar-dark " style="height:10%;background-color: #2C3D59">
		<span class="text-white ml-4" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 菜单栏</span>
		<h2 class=" font-weight-bold ml-5" style="color:#FFFFFF;padding-left:360px">旗袍识别系统</h2>
		<div style="padding-left: 30%">
			<div class="dropdown">
				<!--下拉菜单-->
				<a class="text-white dropdown-toggle" data-toggle="dropdown">
					<img style="height: 24px;width: 24px;-webkit-border-radius:12px;-moz-border-radius:12px;background-color:#FFFFFF"
						src="static/common/image/user.png">&nbsp;
					{% if username == none %}
					未登录
					{% else %}
					<span>{{username}}</span>
					{% endif %}
				</a>
				<div class="dropdown-menu small">
					<a class="dropdown-item" href="/logout.do">
						<img style="height: 20px;width: 20px;border-left:1px #00FF66"
							src="static/common/image/poweroff.png">退出
					</a>
				</div>
			</div>
		</div>
	</nav>

	<!--左侧目录-->
	<div class="container-fluid">
		<div class="row">
			<!--侧边栏-->
			<div id="mySidenav" class="sidenav">
				<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
				<a class="nav-link ml-5 mt-4" href="/crawlerPage">爬虫</a>
				<a class="nav-link ml-5 mt-4" href="/labelPage">标注</a>
				<a class="nav-link ml-5 mt-4" href="/classifyPage">分类</a>
				<a class="nav-link ml-5 mt-4" href="/algorithmPage">算法</a>
			</div>

			<div class="col-sm-10">
				<div style="height: 70%;width: 40%;margin-left:40%">
					<!-- 这里是主模板 -->
					<!--主模板显示内容-->
					<div class="mt-5 ml-5">
						<h3>请选择类别：</h3>
						<select class="form-control mt-3" id="keyword" style="width: 180px">
							<option value="qipao">旗袍</option>
							<option value="other">服装</option>
						</select>
					</div>
					<!--数据源及按钮-->
					<div class="mt-4 ml-5">
						<h3>请选择数据源：</h3>
						<div class="ds_checkbox mt-3">
							<input class="mt-1" type="checkbox" id="checkbox1" name="datasource" value="baidu">
							<span style="font-size: 20px;">百度图片</span>
						</div>
						<div class="ds_checkbox">
							<input class="mt-2" type="checkbox" id="checkbox1" name="datasource" value="baidu">
							<span style="font-size: 20px;">搜狗图片</span>
						</div>
						<div class="ds_checkbox">
							<input class="mt-2" type="checkbox" id="checkbox1" name="datasource" value="baidu">
							<span style="font-size: 20px;">360图片</span>
						</div>
					</div>
					<div class="mt-4 ml-5">
						<h3>爬取数量：</h3>
						<input type="number" class="form-control mt-3" id="num_input" placeholder="请输入要爬的图片数量" min="1"
							max="9999" style="width: 200px">
					</div>
					<div class="mt-5 ml-5">
						<button class="btn btn-success" onclick="doCrawler()">启动</button>
						<button class="btn btn-info ml-5" onclick="doReset()">重置</button>
					</div>
				</div>
				<div id="div_wait"><img style="width: 100px;height:100px;" src="static/common/image/wait.gif" /></div>
			</div>
		</div>
	</div>
</body>

</html>